<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Animatable: One property, two values, endless possibilities</title>
<link href="style.css" rel="stylesheet" />
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
</head>
<body>

<hgroup>
	<h1><a href="#">Animatable</a></h1>
	<h2>One property, two values, endless possibilities</h2>
</hgroup>

<input type="radio" name="animate" id="on-hover" checked />
<label for="on-hover">Animate on hover</label>
<input type="radio" name="animate" id="all" />
<label for="all">Animate all</label>

<div role="main">
	<a data-property="background-color" data-from="slategray" data-to="black"></a>
	<a data-property="background-position" data-from="0 0" data-to="100% 100%" style="background-image: linear-gradient(135deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px"></a>
	<a data-property="background-position" data-from="3px 0, 3px 0, 15px -150px, 15px -150px" data-to="3px -70px, 3px -70px, 15px -80px, 15px -80px" style="background-color: #E04332; background-repeat: repeat-x; background-size: 24px 300px; background-image: linear-gradient(135deg, slategray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, slategray 75%), linear-gradient(45deg, slategray 25%, transparent 25%), linear-gradient(135deg, transparent 75%, slategray 75%);" data-author="kizmarh"></a>
	<a data-property="background-size" data-from="5px 5px" data-to="150px 150px" style="background-image: repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-position:center"></a>
	<a data-property="border-radius" data-from="0" data-to="50%"></a>
	<a data-property="border-radius" data-from="0 100%" data-to="100% 0"></a>
	<a data-property="border-width" data-from="0" data-to="75px" style="border-style:solid; border-color: black;"></a>
	<a data-property="border-width" data-from="0" data-to="35px" style="border-style:dashed; border-color: black;"></a>
	<a data-property="border-width" data-from="0" data-to="75px" style="border-style:double; border-color: black;"></a>
	<a data-property="box-shadow" data-from="0 0 black" data-to="0 150px 10px -50px rgba(0,0,0,.5)"></a>
	<a data-property="box-shadow" data-from="none" data-to="inset -75px -75px 400px #000" data-author="yuritkachenko"></a>
	<a data-property="box-shadow" data-from="inset 0 0 75px 75px slategray, 0 0 0 slategray" data-to="inset 0 0 35px 35px transparent, 0 0 75px 50px transparent" style="background: transparent; border-radius: 1px;" data-author="kizmarh"></a>
	<a data-property="color" data-from="white" data-to="black"></a>
	<a data-property="font-size" data-from="60px" data-to="300px"></a>
	<a data-property="height" data-from="150px" data-to="0"></a>
	<a data-property="letter-spacing" data-from="0" data-to="100px"></a>
	<a data-property="line-height" data-from="10px" data-to="300px"></a>
	<a data-property="opacity" data-from="1" data-to="0"></a>
	<a data-property="outline-width" data-from="0" data-to="100px" style="outline-color:black; outline-style: solid;"></a>
	<a data-property="outline-offset" data-from="-5px" data-to="30px" style="outline-style: dashed; outline-color:slategray;" data-author="mkuehnel"></a>
	<a data-property="outline-color" data-from="transparent" data-to="red" style="outline-width: 30px; outline-style: solid;" data-author="mkuehnel"></a>
	<a data-property="padding" data-from="0" data-to="50px 200px 50px 50px" data-author="steno"></a>
	<a data-property="text-indent" data-from="0" data-to="100px"></a>
	<a data-property="text-shadow" data-from="0 0 black" data-to="20px 20px 10px rgba(0,0,0,.5)"></a>
	<a data-property="text-shadow" data-from="0 0 0 white" data-to="0 0 10px white" style="color: transparent;" data-author="bartaz"></a>
	<a data-property="text-shadow" data-from="0 0 white" data-to="0 0 rgba(255,255,255,0), -45px -45px 0 red, -30px -30px 0 orange, -15px -15px 0 yellow, 0 0 0 green, 15px 15px 0 blue, 30px 30px 0 indigo, 45px 45px 0 violet" style="color: transparent" data-author="kizmarh"></a>
	<a data-property="top" data-from="0" data-to="100px" style="position:relative"></a>
	<a data-property="transform" data-from="rotate(0deg)" data-to="rotate(360deg)"></a>
	<a data-property="transform" data-from="scale(1)" data-to="scale(2)"></a>
	<a data-property="transform" data-from="skewX(0deg)" data-to="skewX(180deg)"></a>
	<a data-property="transform" data-from="rotate(0deg) scale(1)" data-to="rotate(360deg) scale(0)"></a>
	<a data-property="transform" data-from="perspective(400px) rotateY(0deg)" data-to="perspective(400px) rotateY(360deg)"></a>
	<a data-property="transform" data-from="perspective(400px) rotateX(0deg)" data-to="perspective(400px) rotateX(360deg)" data-author="calvein"></a>
	<a data-property="transform" data-from="perspective(400px) rotateY(0deg)" data-to="perspective(400px) translateZ(150px) rotateY(180deg)" data-author="bartaz"></a>
	<a data-property="transform" data-from="perspective(400px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)" data-to="perspective(400px) translate3d(0,0,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg)" data-author="bartaz"></a>
	<a data-property="transform" data-from="perspective(400px) rotate3d(1,1,0,0deg)" data-to="perspective(400px) rotate3d(1,1,0,180deg)" data-author="bartaz"></a>
	<a data-property="transform" data-from="perspective(400px) rotate3d(0,1,0,0deg)" data-to="perspective(400px) rotate3d(0,1,0,-180deg)" data-author="filipearaujo" style="transform-origin: 100% 50%;"></a>
	<a data-property="transform-origin" data-from="50% 50%" data-to="0 100%" style="transform:rotate(45deg)"></a>
	<a data-property="width" data-from="150px" data-to="330px" data-author="mkuehnel"></a>
</div>

<section id="info">
	<h1>box-shadow</h1>
	<a href="#" title="Previous">◀</a>
	<a href="#" title="Next">▶</a>
	<dl>
		<dt>From:</dt>
		<dd>0 0 black</dd>
		
		<dt>To:</dt>
		<dd>0 150px 10px -50px rgba(0,0,0,.5)</dd>
		
		<dt>Author:</dt>
		<dd>@leaverou</dd>
	</dl>
</section>

<footer>Made by <a href="http://lea.verou.me">Lea Verou</a> with care</footer>

<script src="index.js"></script>

<a href="https://github.com/leaverou/animatable" target="_blank" class="github-ribbon">
	<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="LeaVerou">Tweet</a>
<script src="https://platform.twitter.com/widgets.js"></script>

<script src="http://www.google-analytics.com/ga.js"></script> 
<script> 
try {
var pageTracker = _gat._getTracker("UA-597483-5");
pageTracker._trackPageview();
} catch(err) {}
</script> 

</body>
</html>
